<!-- 考试详情 -->
<template>
  <div class="examDetails-page">
    <div class="pck-Exam">考试详情</div>
    <div class="pck-Exam-content">
      <div class="examDetails-box">
        <div class="examDetails-box-img">
          <div class="examDetails-box-img-cont">
            <img src="@/assets/img/exam-img.png" alt="">
            <div class="examDetails-box-num">
              <span>{{ examInfo.score }}</span>
              <span>
                {{ examInfo | filterScore }}
              </span>
            </div>
          </div>
        </div>
        <div class="examDetails-box-line">
          <span class="examDetails-box-line-span">
            <img src="@/assets/icon/exam-time.png" alt="">
            <span>考试用时：</span>
          </span>
          <span>{{ getDuration(examInfo.duration) }}</span>
        </div>
        <div class="examDetails-box-line">
          <span class="examDetails-box-line-span">
            <img src="@/assets/icon/exam-zq.png" alt="">
            <span>正确率：</span>
          </span>
          <span>{{ examInfo.accuracy }}%</span>
        </div>

        <div class="examDetails-box-log" style="margin-top: 40px">
          <div class="examDetails-box-log-title">
            <img src="@/assets/icon/exam1-icon.png" alt="">
            <span>答题情况</span>
          </div>
          <div class="examDetails-box-log-cont">
            <div class="examDetails-box-log-cont-item">
              <div class="log-cont-item-t">答对</div>
              <div class="log-cont-item-b" style="color: #048A39">{{ examInfo.right_question}}题</div>
            </div>
            <div class="examDetails-box-log-cont-item">
              <div class="log-cont-item-t">答错</div>
              <div class="log-cont-item-b" style="color: #E11300">{{ examInfo.wrong_question }}题</div>
            </div>
            <div class="examDetails-box-log-cont-item">
              <div class="log-cont-item-t">未答</div>
              <div class="log-cont-item-b" style="color: #0158FD">{{ examInfo.no_answer }}题</div>
            </div>
          </div>
        </div>

        <div class="examDetails-box-log">
          <div class="examDetails-box-log-title">
            <img src="@/assets/icon/exam1-icon.png" alt="">
            <span>考试情况</span>
          </div>
          <div class="examDetails-box-log-cont">
            <div class="examDetails-box-log-cont-item1">
              <div class="log-cont-item-t">考试题数</div>
              <div class="log-cont-item-b">{{ examInfo.paper?.item_number }}题</div>
            </div>
            <div class="examDetails-box-log-cont-item1">
              <div class="log-cont-item-t">考试时间</div>
              <div class="log-cont-item-b">{{ examInfo.paper?.exam_time }}分钟</div>
            </div>
            <div class="examDetails-box-log-cont-item1">
              <div class="log-cont-item-t">满分</div>
              <div class="log-cont-item-b">{{ examInfo.paper?.total_score }}分</div>
            </div>
            <div class="examDetails-box-log-cont-item1">
              <div class="log-cont-item-t">及格分</div>
              <div class="log-cont-item-b">{{ examInfo.paper?.passing_mark }}分</div>
            </div>
          </div>
        </div>
        <div class="examDetails-box-btns">
          <div class="examDetails-box-btns-item btns-item1" @click="goBack">返 回</div>
          <div class="examDetails-box-btns-item btns-item2" @click="handelClick(1)">错题重练</div>
          <div class="examDetails-box-btns-item btns-item3" @click="handelClick(2)">在练一次</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getResultAnswer } from '@/api'
import watermark from "@/utils/watermark";
export default {
  name: "examDetails",
  data(){
    return {
      paperId: '',
      recordId: '',
      examInfo: {}
    }
  },
  filters: {
    // 考试分数状态
    filterScore(e) {
      let str = "";
      let n0 = e.score || 0 // 当前分数
      let n1 = e?.paper?.passing_mark // 及格
      let n2 = e?.paper?.good_score.split("-") // 良好
      let n3 = e?.paper?.excellent_score.split("-")// 优秀
      if ( n0 >= n1) {
        if (n1 <= n0 && n0 < n2[0]*1) {
          str = '及格'
        } else if (n2[0]*1 <= n0 && n0 < n2[1]*1) {
          str = '良好'
        } else if (n0 >= n3[0]*1) {
          str = '优秀'
        }
      } else {
        str = '不及格'
      }
      return str;
    },
  },
  mounted() {
    this.paperId = this.$route.query.paper_id
    this.recordId = this.$route.query.record_id
    if (this.paperId && this.recordId) {
      this.getResultAnswer()
    }
    watermark.set('')
  },
  methods: {
    // 返回
    goBack() {
      this.$router.push({
        path: '/simulatedExam'
      })
    },
    // 获取考试结果详情
    getResultAnswer() {
      let params = {
        paper_id: this.paperId,
        record_id: this.recordId
      }
      getResultAnswer(params).then(res => {
        if (res.code == 1) {
          this.examInfo = res?.data?.detail || {}
        }
      })
    },
    // 错题重练、再练一次
    handelClick(n) {
      if (n == 1) {
        this.$router.push({
          path: '/wrongQuestionsAgain',
          query: {
            paper_id: this.paperId,
            record_id: this.recordId
          }
        })
      } else {
        this.$router.push({
          path: '/examManage',
          query: {
            paper_id: this.paperId
          }
        })
      }
    },
    // 时间计算
    getDuration(e) {
      let seconds = e
      let hours = Math.floor(seconds / 3600);
      seconds %= 3600;
      let minutes = Math.floor(seconds / 60);
      seconds %= 60;
      let a = hours == 0 ? '00' : hours < 10 ? '0' + hours : hours
      let b = minutes == 0 ? '00' : minutes < 10 ? '0' + minutes : minutes
      let c = seconds.toFixed(0) == 0 ? '00' : seconds.toFixed(0) < 10 ? '0' + seconds.toFixed(0) : seconds.toFixed(0)
      return `${a}:${b}:${c}`
    },
    // 获取考试成绩状态
    getRange(e) {
      // if (e.score >= n1 && e.score <= Number(n2.slice('-')[0])) {
      //   console.log(1)
      //   return '及格';
      // } else if (e.score >= 70 && e.score <= 79) {
      //   console.log(2)
      //   return '良好';
      // } else if (e.score >= 80 && e.score <= 100) {
      //   console.log(3)
      //   return '优秀';
      // }
    }
  }
}
</script>

<style lang="scss" scoped>
.examDetails-page {
  width: 100%;
  height: 100%;
  .examDetails-box {
    position: relative;
    width: 50%;
    height: 100%;
    margin: 0 auto;
    .examDetails-box-img {
      width: 100%;
      height: 230px;
      border-bottom: 1px solid #EEEEEE;
      position: relative;
      .examDetails-box-img-cont {
        position: relative;
        width: 210px;
        height: 210px;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
      }
      img {
        width: 100%;
        height: 100%;
      }
      .examDetails-box-num {
        width: 80px;
        height: 40px;
        display: flex;
        text-align: center;
        flex-direction: column;
        position: absolute;
        top: 70px;
        left: 65px;
        span:nth-of-type(1) {
          font-weight: 800;
          font-size: 22px;
          color: #345EE4;
        }
        span:nth-of-type(2) {
          font-weight: 400;
          font-size: 12px;
          color: #333333;
        }
      }
    }
    .examDetails-box-line {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 15px 0;
      font-size: 14px;
      color: #666666;
      .examDetails-box-line-span {
        display: flex;
        align-items: center;
        img {
          width: 15px;
          height: 15px;
          margin-right: 10px;
        }
      }
    }
    .examDetails-box-log {
      font-size: 14px;
      color: #333333;
      .examDetails-box-log-title{
        display: flex;
        align-items: center;
        img {
          width: 15px;
          height: 15px;
          margin-right: 10px;
        }
      }
      .examDetails-box-log-cont {
        margin: 15px 0 20px;
        display: flex;
        justify-content: space-between;
        .examDetails-box-log-cont-item {
          width: 32%;
          background: #F6F7FB;
          border-radius: 4px;
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 15px 0;
          .log-cont-item-t {
            font-weight: 400;
            font-size: 12px;
            color: #666666;
          }
          .log-cont-item-b {
            margin-top: 5px;
          }
        }
        .examDetails-box-log-cont-item1 {
          width: 25%;
          background: #F6F7FB;
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 15px 0;
          .log-cont-item-t {
            font-weight: 400;
            font-size: 12px;
            color: #666666;
          }
          .log-cont-item-b {
            margin-top: 5px;
          }
        }
      }
    }
    .examDetails-box-btns {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 30px 0 20px 0;
      .examDetails-box-btns-item {
        width: 30%;
        font-size: 12px;
        text-align: center;
        padding: 5px 0;
        border-radius: 3px;
        cursor: pointer;
        &:active { opacity: 0.5 }
      }
      .btns-item1 {
        background: #F2F2F2;
        color: #333333;
      }
      .btns-item2 {
        background: #0158FD;
        color: #FFFFFF;
      }
      .btns-item3 {
        color: #0158FD;
        border: 1px solid #0158FD;
      }
    }
  }
}
</style>
